<template>
    <div class="homeLayout">
        <!-- 标题 -->
        <Title>
            <template #default>{{ title }}</template>
        </Title>
        <!-- 内容区 -->
        <section class="contentLayout">
            <!-- 上方用户注册数等 -->
            <div>
                <el-row :gutter="16" class="topData">
                    <el-col :xs="24" :sm="8">
                        <infoNumber :infoNum="userNumber">
                            <template #title>用户注册数</template>
                        </infoNumber>
                    </el-col>
                    <el-col :xs="24" :sm="8">
                        <infoNumber :infoNum="jobCreateNumber">
                            <template #title>职位发布数</template>
                        </infoNumber>
                    </el-col>
                    <el-col :xs="24" :sm="8">
                        <infoNumber :infoNum="jobAppliedNumber">
                            <template #title>职位投递数</template>
                        </infoNumber>
                    </el-col>
                </el-row>
            </div>
            <!-- 下方分行浏览数柱状图 -->
            <div class="companyLayout">
                <div class="titleName">分行浏览数柱状图</div>
                <div class="chart" id="echart" ref="echart"></div>
            </div>
        </section>
    </div>
</template>
    
<script setup>
import * as echarts from "echarts";
import Title from "components/public/Title";
import infoNumber from "./Number";
import { useRoute } from "vue-router";
import {
    getUserRegister,
    getJobCreated,
    getJobApplied,
    getCompanyBrowsed,
} from "@/network/home";
import { onMounted, ref, watch } from "vue";
import { useIsCollapseStore } from "@/store/pinia";

const pinia = useIsCollapseStore();

const route = useRoute();
const title = route.meta.title;

const userNumber = ref({});
const jobCreateNumber = ref({});
const jobAppliedNumber = ref({});
const CompanyBrowsedNumber = ref({});

function initChart() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById("echart"));
    // 绘制图表
    myChart.setOption({
        // 指定图表的配置项和数据
        title: {
            text: "",
        },
        tooltip: {},
        xAxis: {
            data: ["本日", "本周", "本月"],
        },
        yAxis: {},
        series: [
            {
                name: "公司浏览数",
                type: "bar",
                data: [5, 10, 15],
            },
        ],
        grid: {
            // x: "25%", //x 偏移量
            // y: "25%", // y 偏移量
            width: "80%", // 宽度
            height: "70%", // 高度
        },
    });

    // setTimeout(() => {
    //     window.onresize = myChart.resize;
    //     console.log(111);
    // }, 100);
    // watch(
    //     () => pinia.isCollapse,
    //     (newFlex, oldFlex) => {
    // 根据窗口大小自适应;

    // setTimeout(() => {
    //     window.onresize = myChart.resize;
    // }, 100);
    // window.addEventListener("resize", function () {
    //     myChart.resize();
    //     console.log(1111);
    //     console.log(pinia.isCollapse);
    // });

    // 创建观察对象
    const resizeObserver = new ResizeObserver((entries) => {
        window.onresize = myChart.resize;
    });
    // 指定要观察的dom
    const test = document.getElementById("echart");
    if (test) {
        setTimeout(() => {
            resizeObserver.observe(test);
        }, 100);
    }

    // // 获取wrap盒子的宽高
    // let width = document.getElementById("echart").clientWidth;
    // let height = document.getElementById("echart").clientHeight;

    // // 渲染echart图表的方法
    // drawchart(){
    //     let charts = echarts.init(document.getElementById("echart"));
    //     // 每次渲染之前都要clear一下，因为图表数据不是一成不变的，当重新调接口获取数据后就要重新渲染，如果不clear，有可能造成图表不变或图表叠加渲染等情况
    //     charts.clear();
    //     let option = {
    //         // 指定图表的配置项和数据
    //         title: {
    //             text: "",
    //         },
    //         tooltip: {},
    //         xAxis: {
    //             data: ["本日", "本周", "本月"],
    //         },
    //         yAxis: {},
    //         series: [
    //             {
    //                 name: "公司浏览数",
    //                 type: "bar",
    //                 data: [5, 10, 15],
    //             },
    //         ],
    //     };
    //     // 一般这一步是写charts.resize()，让图表根据当前屏幕尺寸自适应，但是当前canvas画布大小与容器大小不一致，而容器大小已经设置了百分比，所以可以在resize里面手动设置宽高，使其占满整个wrap盒子
    //     charts.resize({
    //         //width: width,
    //         //height: height,
    //         // es6解构
    //         width,
    //         height,
    //     });
    //     // 渲染图表
    //     charts.setOption(option);
    // };
}

onMounted(() => {
    userRegister();
    JobCreated();
    JobApplied();
    CompanyBrowsed();
    initChart();
});

//获取数据 统计-用户注册
const userRegister = async () => {
    await getUserRegister().then((res) => {
        // console.log(res);
        userNumber.value = res.data.data;
    });
};

// 获取 统计-发布职位 getJobCreated
const JobCreated = async () => {
    await getJobCreated().then((res) => {
        // console.log(res);
        jobCreateNumber.value = res.data.data;
    });
};

// 获取 统计-投递职位
const JobApplied = async () => {
    await getJobApplied().then((res) => {
        // console.log(res);
        jobAppliedNumber.value = res.data.data;
    });
};

// 获取 统计-公司浏览数
const CompanyBrowsed = async () => {
    await getCompanyBrowsed().then((res) => {
        console.log(res);
        CompanyBrowsedNumber.value = res.data.data;
        console.log(CompanyBrowsedNumber.value);
    });
};
</script>
    
<style lang="scss" scoped>
.homeLayout {
    .contentLayout {
        background: transparent !important;
        .companyLayout {
            margin-top: 16px;
            background: #fff;
            border: 1px solid var(--border-color-tint);
            .titleName {
                padding: 16px 24px;
                border-bottom: 1px solid var(--border-color-tint);
            }
            .chart {
                width: 100%;
                min-height: 400px;
                height: 100%;
            }
        }
    }
}
</style>